<!-- 在 <template> 中，使用 filteredNewsArr 代替原来的 newsArr。 -->
  <template>
    <div>
      <ul>
        <li
          v-for="item in filteredNewsArr"   
          @click="toNews(item.url)"
          :key="item.uniquekey"
        >
          <div class="img-box">
            <img :src="item.thumbnail_pic_s" />
          </div>
          <div class="text-box">
            <h3>{{ item.title }}</h3>
            <p>{{ item.author_name }} {{ item.date }}</p>
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  <!-- 在 <script setup> 中，添加了过滤逻辑，使用 filteredNewsArr 代替原来的 newsArr。 -->
  <script setup>
  import { reactive, computed } from "vue";
  
  const myProps = defineProps({
    data: Array,
  });
  
  const filteredNewsArr = reactive(
    computed(() => {
      return myProps.data.filter(item => item.thumbnail_pic_s);
    })
  );
  
  const toNews = (url) => {
    location.href = url;
  }
  </script>
  
  <style scoped>
  ul {
    width: 100%;
  }
  ul li {
    box-sizing: border-box;
    padding: 6px;
    width: 100%;
    height: 93px;
  
    display: flex;
    border-bottom: dashed 1px #aaa;
  
    user-select: none;
    cursor: pointer;
  }
  ul li .img-box {
    flex: 0 0 100px;
    height: 80px;
  }
  ul li .img-box img {
    width: 100px;
    height: 80px;
  }
  ul li .text-box {
    flex: 1;
    box-sizing: border-box;
    padding-left: 10px;
  }
  ul li .text-box h3 {
    font-size: 16px;
    font-weight: 300;
  }
  ul li .text-box p {
    font-size: 14px;
    text-align: right;
  }
  </style>
  